.theme-grey {
  color: #f0f0f0;
}
.theme-grey.bg-bg1,
.theme-grey .bg-bg1 {
  background-color: #555555;
}
.theme-grey.bg-bg2,
.theme-grey .bg-bg2 {
  background-color: #5f5f5f;
}
.theme-grey.bg-fg1,
.theme-grey .bg-fg1 {
  background-color: #d0d0d0;
}
.theme-grey.bg-fg2,
.theme-grey .bg-fg2 {
  background-color: #b8b8b8;
}
.theme-grey.bd-bg1,
.theme-grey .bd-bg1 {
  border-color: #555555;
}
.theme-grey.bd-bg2,
.theme-grey .bd-bg2 {
  border-color: #5f5f5f;
}
.theme-grey.bd-fg1,
.theme-grey .bd-fg1 {
  border-color: #d0d0d0;
}
.theme-grey.bd-fg2,
.theme-grey .bd-fg2 {
  border-color: #b8b8b8;
}
.theme-grey.txt-bg1,
.theme-grey .txt-bg1 {
  color: #555555;
}
.theme-grey.txt-bg2,
.theme-grey .txt-bg2 {
  color: #5f5f5f;
}
.theme-grey.txt-fg1,
.theme-grey .txt-fg1 {
  color: #d0d0d0;
}
.theme-grey.txt-fg2,
.theme-grey .txt-fg2 {
  color: #b8b8b8;
}
.theme-grey svg .stroke-bg1 {
  stroke: #555555;
}
.theme-grey svg .stroke-bg2 {
  stroke: #5f5f5f;
}
.theme-grey svg .stroke-fg1 {
  stroke: #d0d0d0;
}
.theme-grey svg .stroke-fg2 {
  stroke: #b8b8b8;
}
.theme-grey svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-grey svg .fill-bg1 {
  fill: #555555;
}
.theme-grey svg .fill-bg2 {
  fill: #5f5f5f;
}
.theme-grey svg .fill-fg1 {
  fill: #d0d0d0;
}
.theme-grey svg .fill-fg2 {
  fill: #b8b8b8;
}
.theme-grey.outline-bg1,
.theme-grey .outline-bg1 {
  outline-color: #555555;
}
.theme-grey.outline-bg2,
.theme-grey .outline-bg2 {
  outline-color: #5f5f5f;
}
.theme-grey.outline-fg1,
.theme-grey .outline-fg1 {
  outline-color: #d0d0d0;
}
.theme-grey.outline-fg2,
.theme-grey .outline-fg2 {
  outline-color: #b8b8b8;
}
.theme-almond {
  color: #f0f0f0;
}
.theme-almond.bg-bg1,
.theme-almond .bg-bg1 {
  background-color: #454037;
}
.theme-almond.bg-bg2,
.theme-almond .bg-bg2 {
  background-color: #534f48;
}
.theme-almond.bg-fg1,
.theme-almond .bg-fg1 {
  background-color: #dbcf97;
}
.theme-almond.bg-fg2,
.theme-almond .bg-fg2 {
  background-color: #ebdeb2;
}
.theme-almond.bd-bg1,
.theme-almond .bd-bg1 {
  border-color: #454037;
}
.theme-almond.bd-bg2,
.theme-almond .bd-bg2 {
  border-color: #534f48;
}
.theme-almond.bd-fg1,
.theme-almond .bd-fg1 {
  border-color: #dbcf97;
}
.theme-almond.bd-fg2,
.theme-almond .bd-fg2 {
  border-color: #ebdeb2;
}
.theme-almond.txt-bg1,
.theme-almond .txt-bg1 {
  color: #454037;
}
.theme-almond.txt-bg2,
.theme-almond .txt-bg2 {
  color: #534f48;
}
.theme-almond.txt-fg1,
.theme-almond .txt-fg1 {
  color: #dbcf97;
}
.theme-almond.txt-fg2,
.theme-almond .txt-fg2 {
  color: #ebdeb2;
}
.theme-almond svg .stroke-bg1 {
  stroke: #454037;
}
.theme-almond svg .stroke-bg2 {
  stroke: #534f48;
}
.theme-almond svg .stroke-fg1 {
  stroke: #dbcf97;
}
.theme-almond svg .stroke-fg2 {
  stroke: #ebdeb2;
}
.theme-almond svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-almond svg .fill-bg1 {
  fill: #454037;
}
.theme-almond svg .fill-bg2 {
  fill: #534f48;
}
.theme-almond svg .fill-fg1 {
  fill: #dbcf97;
}
.theme-almond svg .fill-fg2 {
  fill: #ebdeb2;
}
.theme-almond.outline-bg1,
.theme-almond .outline-bg1 {
  outline-color: #454037;
}
.theme-almond.outline-bg2,
.theme-almond .outline-bg2 {
  outline-color: #534f48;
}
.theme-almond.outline-fg1,
.theme-almond .outline-fg1 {
  outline-color: #dbcf97;
}
.theme-almond.outline-fg2,
.theme-almond .outline-fg2 {
  outline-color: #ebdeb2;
}
.theme-red {
  color: #f0f0f0;
}
.theme-red.bg-bg1,
.theme-red .bg-bg1 {
  background-color: #33110c;
}
.theme-red.bg-bg2,
.theme-red .bg-bg2 {
  background-color: #581a0f;
}
.theme-red.bg-fg1,
.theme-red .bg-fg1 {
  background-color: #ff371b;
}
.theme-red.bg-fg2,
.theme-red .bg-fg2 {
  background-color: #ff5f42;
}
.theme-red.bd-bg1,
.theme-red .bd-bg1 {
  border-color: #33110c;
}
.theme-red.bd-bg2,
.theme-red .bd-bg2 {
  border-color: #581a0f;
}
.theme-red.bd-fg1,
.theme-red .bd-fg1 {
  border-color: #ff371b;
}
.theme-red.bd-fg2,
.theme-red .bd-fg2 {
  border-color: #ff5f42;
}
.theme-red.txt-bg1,
.theme-red .txt-bg1 {
  color: #33110c;
}
.theme-red.txt-bg2,
.theme-red .txt-bg2 {
  color: #581a0f;
}
.theme-red.txt-fg1,
.theme-red .txt-fg1 {
  color: #ff371b;
}
.theme-red.txt-fg2,
.theme-red .txt-fg2 {
  color: #ff5f42;
}
.theme-red svg .stroke-bg1 {
  stroke: #33110c;
}
.theme-red svg .stroke-bg2 {
  stroke: #581a0f;
}
.theme-red svg .stroke-fg1 {
  stroke: #ff371b;
}
.theme-red svg .stroke-fg2 {
  stroke: #ff5f42;
}
.theme-red svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-red svg .fill-bg1 {
  fill: #33110c;
}
.theme-red svg .fill-bg2 {
  fill: #581a0f;
}
.theme-red svg .fill-fg1 {
  fill: #ff371b;
}
.theme-red svg .fill-fg2 {
  fill: #ff5f42;
}
.theme-red.outline-bg1,
.theme-red .outline-bg1 {
  outline-color: #33110c;
}
.theme-red.outline-bg2,
.theme-red .outline-bg2 {
  outline-color: #581a0f;
}
.theme-red.outline-fg1,
.theme-red .outline-fg1 {
  outline-color: #ff371b;
}
.theme-red.outline-fg2,
.theme-red .outline-fg2 {
  outline-color: #ff5f42;
}
.theme-orange {
  color: #f0f0f0;
}
.theme-orange.bg-bg1,
.theme-orange .bg-bg1 {
  background-color: #312202;
}
.theme-orange.bg-bg2,
.theme-orange .bg-bg2 {
  background-color: #60370a;
}
.theme-orange.bg-fg1,
.theme-orange .bg-fg1 {
  background-color: #e96b00;
}
.theme-orange.bg-fg2,
.theme-orange .bg-fg2 {
  background-color: #ffa03a;
}
.theme-orange.bd-bg1,
.theme-orange .bd-bg1 {
  border-color: #312202;
}
.theme-orange.bd-bg2,
.theme-orange .bd-bg2 {
  border-color: #60370a;
}
.theme-orange.bd-fg1,
.theme-orange .bd-fg1 {
  border-color: #e96b00;
}
.theme-orange.bd-fg2,
.theme-orange .bd-fg2 {
  border-color: #ffa03a;
}
.theme-orange.txt-bg1,
.theme-orange .txt-bg1 {
  color: #312202;
}
.theme-orange.txt-bg2,
.theme-orange .txt-bg2 {
  color: #60370a;
}
.theme-orange.txt-fg1,
.theme-orange .txt-fg1 {
  color: #e96b00;
}
.theme-orange.txt-fg2,
.theme-orange .txt-fg2 {
  color: #ffa03a;
}
.theme-orange svg .stroke-bg1 {
  stroke: #312202;
}
.theme-orange svg .stroke-bg2 {
  stroke: #60370a;
}
.theme-orange svg .stroke-fg1 {
  stroke: #e96b00;
}
.theme-orange svg .stroke-fg2 {
  stroke: #ffa03a;
}
.theme-orange svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-orange svg .fill-bg1 {
  fill: #312202;
}
.theme-orange svg .fill-bg2 {
  fill: #60370a;
}
.theme-orange svg .fill-fg1 {
  fill: #e96b00;
}
.theme-orange svg .fill-fg2 {
  fill: #ffa03a;
}
.theme-orange.outline-bg1,
.theme-orange .outline-bg1 {
  outline-color: #312202;
}
.theme-orange.outline-bg2,
.theme-orange .outline-bg2 {
  outline-color: #60370a;
}
.theme-orange.outline-fg1,
.theme-orange .outline-fg1 {
  outline-color: #e96b00;
}
.theme-orange.outline-fg2,
.theme-orange .outline-fg2 {
  outline-color: #ffa03a;
}
.theme-lightgreen {
  color: #f0f0f0;
}
.theme-lightgreen.bg-bg1,
.theme-lightgreen .bg-bg1 {
  background-color: #152101;
}
.theme-lightgreen.bg-bg2,
.theme-lightgreen .bg-bg2 {
  background-color: #375308;
}
.theme-lightgreen.bg-fg1,
.theme-lightgreen .bg-fg1 {
  background-color: #50c400;
}
.theme-lightgreen.bg-fg2,
.theme-lightgreen .bg-fg2 {
  background-color: #8cf837;
}
.theme-lightgreen.bd-bg1,
.theme-lightgreen .bd-bg1 {
  border-color: #152101;
}
.theme-lightgreen.bd-bg2,
.theme-lightgreen .bd-bg2 {
  border-color: #375308;
}
.theme-lightgreen.bd-fg1,
.theme-lightgreen .bd-fg1 {
  border-color: #50c400;
}
.theme-lightgreen.bd-fg2,
.theme-lightgreen .bd-fg2 {
  border-color: #8cf837;
}
.theme-lightgreen.txt-bg1,
.theme-lightgreen .txt-bg1 {
  color: #152101;
}
.theme-lightgreen.txt-bg2,
.theme-lightgreen .txt-bg2 {
  color: #375308;
}
.theme-lightgreen.txt-fg1,
.theme-lightgreen .txt-fg1 {
  color: #50c400;
}
.theme-lightgreen.txt-fg2,
.theme-lightgreen .txt-fg2 {
  color: #8cf837;
}
.theme-lightgreen svg .stroke-bg1 {
  stroke: #152101;
}
.theme-lightgreen svg .stroke-bg2 {
  stroke: #375308;
}
.theme-lightgreen svg .stroke-fg1 {
  stroke: #50c400;
}
.theme-lightgreen svg .stroke-fg2 {
  stroke: #8cf837;
}
.theme-lightgreen svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-lightgreen svg .fill-bg1 {
  fill: #152101;
}
.theme-lightgreen svg .fill-bg2 {
  fill: #375308;
}
.theme-lightgreen svg .fill-fg1 {
  fill: #50c400;
}
.theme-lightgreen svg .fill-fg2 {
  fill: #8cf837;
}
.theme-lightgreen.outline-bg1,
.theme-lightgreen .outline-bg1 {
  outline-color: #152101;
}
.theme-lightgreen.outline-bg2,
.theme-lightgreen .outline-bg2 {
  outline-color: #375308;
}
.theme-lightgreen.outline-fg1,
.theme-lightgreen .outline-fg1 {
  outline-color: #50c400;
}
.theme-lightgreen.outline-fg2,
.theme-lightgreen .outline-fg2 {
  outline-color: #8cf837;
}
.theme-forestgreen {
  color: #f0f0f0;
}
.theme-forestgreen.bg-bg1,
.theme-forestgreen .bg-bg1 {
  background-color: #032b0c;
}
.theme-forestgreen.bg-bg2,
.theme-forestgreen .bg-bg2 {
  background-color: #096b1f;
}
.theme-forestgreen.bg-fg1,
.theme-forestgreen .bg-fg1 {
  background-color: #00cb2e;
}
.theme-forestgreen.bg-fg2,
.theme-forestgreen .bg-fg2 {
  background-color: #3af163;
}
.theme-forestgreen.bd-bg1,
.theme-forestgreen .bd-bg1 {
  border-color: #032b0c;
}
.theme-forestgreen.bd-bg2,
.theme-forestgreen .bd-bg2 {
  border-color: #096b1f;
}
.theme-forestgreen.bd-fg1,
.theme-forestgreen .bd-fg1 {
  border-color: #00cb2e;
}
.theme-forestgreen.bd-fg2,
.theme-forestgreen .bd-fg2 {
  border-color: #3af163;
}
.theme-forestgreen.txt-bg1,
.theme-forestgreen .txt-bg1 {
  color: #032b0c;
}
.theme-forestgreen.txt-bg2,
.theme-forestgreen .txt-bg2 {
  color: #096b1f;
}
.theme-forestgreen.txt-fg1,
.theme-forestgreen .txt-fg1 {
  color: #00cb2e;
}
.theme-forestgreen.txt-fg2,
.theme-forestgreen .txt-fg2 {
  color: #3af163;
}
.theme-forestgreen svg .stroke-bg1 {
  stroke: #032b0c;
}
.theme-forestgreen svg .stroke-bg2 {
  stroke: #096b1f;
}
.theme-forestgreen svg .stroke-fg1 {
  stroke: #00cb2e;
}
.theme-forestgreen svg .stroke-fg2 {
  stroke: #3af163;
}
.theme-forestgreen svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-forestgreen svg .fill-bg1 {
  fill: #032b0c;
}
.theme-forestgreen svg .fill-bg2 {
  fill: #096b1f;
}
.theme-forestgreen svg .fill-fg1 {
  fill: #00cb2e;
}
.theme-forestgreen svg .fill-fg2 {
  fill: #3af163;
}
.theme-forestgreen.outline-bg1,
.theme-forestgreen .outline-bg1 {
  outline-color: #032b0c;
}
.theme-forestgreen.outline-bg2,
.theme-forestgreen .outline-bg2 {
  outline-color: #096b1f;
}
.theme-forestgreen.outline-fg1,
.theme-forestgreen .outline-fg1 {
  outline-color: #00cb2e;
}
.theme-forestgreen.outline-fg2,
.theme-forestgreen .outline-fg2 {
  outline-color: #3af163;
}
.theme-azure {
  color: #f0f0f0;
}
.theme-azure.bg-bg1,
.theme-azure .bg-bg1 {
  background-color: #0c1f2b;
}
.theme-azure.bg-bg2,
.theme-azure .bg-bg2 {
  background-color: #1d628e;
}
.theme-azure.bg-fg1,
.theme-azure .bg-fg1 {
  background-color: #2e98db;
}
.theme-azure.bg-fg2,
.theme-azure .bg-fg2 {
  background-color: #6dc7ff;
}
.theme-azure.bd-bg1,
.theme-azure .bd-bg1 {
  border-color: #0c1f2b;
}
.theme-azure.bd-bg2,
.theme-azure .bd-bg2 {
  border-color: #1d628e;
}
.theme-azure.bd-fg1,
.theme-azure .bd-fg1 {
  border-color: #2e98db;
}
.theme-azure.bd-fg2,
.theme-azure .bd-fg2 {
  border-color: #6dc7ff;
}
.theme-azure.txt-bg1,
.theme-azure .txt-bg1 {
  color: #0c1f2b;
}
.theme-azure.txt-bg2,
.theme-azure .txt-bg2 {
  color: #1d628e;
}
.theme-azure.txt-fg1,
.theme-azure .txt-fg1 {
  color: #2e98db;
}
.theme-azure.txt-fg2,
.theme-azure .txt-fg2 {
  color: #6dc7ff;
}
.theme-azure svg .stroke-bg1 {
  stroke: #0c1f2b;
}
.theme-azure svg .stroke-bg2 {
  stroke: #1d628e;
}
.theme-azure svg .stroke-fg1 {
  stroke: #2e98db;
}
.theme-azure svg .stroke-fg2 {
  stroke: #6dc7ff;
}
.theme-azure svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-azure svg .fill-bg1 {
  fill: #0c1f2b;
}
.theme-azure svg .fill-bg2 {
  fill: #1d628e;
}
.theme-azure svg .fill-fg1 {
  fill: #2e98db;
}
.theme-azure svg .fill-fg2 {
  fill: #6dc7ff;
}
.theme-azure.outline-bg1,
.theme-azure .outline-bg1 {
  outline-color: #0c1f2b;
}
.theme-azure.outline-bg2,
.theme-azure .outline-bg2 {
  outline-color: #1d628e;
}
.theme-azure.outline-fg1,
.theme-azure .outline-fg1 {
  outline-color: #2e98db;
}
.theme-azure.outline-fg2,
.theme-azure .outline-fg2 {
  outline-color: #6dc7ff;
}
.theme-teal {
  color: #f0f0f0;
}
.theme-teal.bg-bg1,
.theme-teal .bg-bg1 {
  background-color: #0a2b2f;
}
.theme-teal.bg-bg2,
.theme-teal .bg-bg2 {
  background-color: #0b5862;
}
.theme-teal.bg-fg1,
.theme-teal .bg-fg1 {
  background-color: #16b6ca;
}
.theme-teal.bg-fg2,
.theme-teal .bg-fg2 {
  background-color: #00e3ff;
}
.theme-teal.bd-bg1,
.theme-teal .bd-bg1 {
  border-color: #0a2b2f;
}
.theme-teal.bd-bg2,
.theme-teal .bd-bg2 {
  border-color: #0b5862;
}
.theme-teal.bd-fg1,
.theme-teal .bd-fg1 {
  border-color: #16b6ca;
}
.theme-teal.bd-fg2,
.theme-teal .bd-fg2 {
  border-color: #00e3ff;
}
.theme-teal.txt-bg1,
.theme-teal .txt-bg1 {
  color: #0a2b2f;
}
.theme-teal.txt-bg2,
.theme-teal .txt-bg2 {
  color: #0b5862;
}
.theme-teal.txt-fg1,
.theme-teal .txt-fg1 {
  color: #16b6ca;
}
.theme-teal.txt-fg2,
.theme-teal .txt-fg2 {
  color: #00e3ff;
}
.theme-teal svg .stroke-bg1 {
  stroke: #0a2b2f;
}
.theme-teal svg .stroke-bg2 {
  stroke: #0b5862;
}
.theme-teal svg .stroke-fg1 {
  stroke: #16b6ca;
}
.theme-teal svg .stroke-fg2 {
  stroke: #00e3ff;
}
.theme-teal svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-teal svg .fill-bg1 {
  fill: #0a2b2f;
}
.theme-teal svg .fill-bg2 {
  fill: #0b5862;
}
.theme-teal svg .fill-fg1 {
  fill: #16b6ca;
}
.theme-teal svg .fill-fg2 {
  fill: #00e3ff;
}
.theme-teal.outline-bg1,
.theme-teal .outline-bg1 {
  outline-color: #0a2b2f;
}
.theme-teal.outline-bg2,
.theme-teal .outline-bg2 {
  outline-color: #0b5862;
}
.theme-teal.outline-fg1,
.theme-teal .outline-fg1 {
  outline-color: #16b6ca;
}
.theme-teal.outline-fg2,
.theme-teal .outline-fg2 {
  outline-color: #00e3ff;
}
.theme-blue {
  color: #f0f0f0;
}
.theme-blue.bg-bg1,
.theme-blue .bg-bg1 {
  background-color: #080d24;
}
.theme-blue.bg-bg2,
.theme-blue .bg-bg2 {
  background-color: #0d1e6b;
}
.theme-blue.bg-fg1,
.theme-blue .bg-fg1 {
  background-color: #2d53ff;
}
.theme-blue.bg-fg2,
.theme-blue .bg-fg2 {
  background-color: #6c86ff;
}
.theme-blue.bd-bg1,
.theme-blue .bd-bg1 {
  border-color: #080d24;
}
.theme-blue.bd-bg2,
.theme-blue .bd-bg2 {
  border-color: #0d1e6b;
}
.theme-blue.bd-fg1,
.theme-blue .bd-fg1 {
  border-color: #2d53ff;
}
.theme-blue.bd-fg2,
.theme-blue .bd-fg2 {
  border-color: #6c86ff;
}
.theme-blue.txt-bg1,
.theme-blue .txt-bg1 {
  color: #080d24;
}
.theme-blue.txt-bg2,
.theme-blue .txt-bg2 {
  color: #0d1e6b;
}
.theme-blue.txt-fg1,
.theme-blue .txt-fg1 {
  color: #2d53ff;
}
.theme-blue.txt-fg2,
.theme-blue .txt-fg2 {
  color: #6c86ff;
}
.theme-blue svg .stroke-bg1 {
  stroke: #080d24;
}
.theme-blue svg .stroke-bg2 {
  stroke: #0d1e6b;
}
.theme-blue svg .stroke-fg1 {
  stroke: #2d53ff;
}
.theme-blue svg .stroke-fg2 {
  stroke: #6c86ff;
}
.theme-blue svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-blue svg .fill-bg1 {
  fill: #080d24;
}
.theme-blue svg .fill-bg2 {
  fill: #0d1e6b;
}
.theme-blue svg .fill-fg1 {
  fill: #2d53ff;
}
.theme-blue svg .fill-fg2 {
  fill: #6c86ff;
}
.theme-blue.outline-bg1,
.theme-blue .outline-bg1 {
  outline-color: #080d24;
}
.theme-blue.outline-bg2,
.theme-blue .outline-bg2 {
  outline-color: #0d1e6b;
}
.theme-blue.outline-fg1,
.theme-blue .outline-fg1 {
  outline-color: #2d53ff;
}
.theme-blue.outline-fg2,
.theme-blue .outline-fg2 {
  outline-color: #6c86ff;
}
.theme-violet {
  color: #f0f0f0;
}
.theme-violet.bg-bg1,
.theme-violet .bg-bg1 {
  background-color: #120231;
}
.theme-violet.bg-bg2,
.theme-violet .bg-bg2 {
  background-color: #3700a3;
}
.theme-violet.bg-fg1,
.theme-violet .bg-fg1 {
  background-color: #7b37ff;
}
.theme-violet.bg-fg2,
.theme-violet .bg-fg2 {
  background-color: #9e6cff;
}
.theme-violet.bd-bg1,
.theme-violet .bd-bg1 {
  border-color: #120231;
}
.theme-violet.bd-bg2,
.theme-violet .bd-bg2 {
  border-color: #3700a3;
}
.theme-violet.bd-fg1,
.theme-violet .bd-fg1 {
  border-color: #7b37ff;
}
.theme-violet.bd-fg2,
.theme-violet .bd-fg2 {
  border-color: #9e6cff;
}
.theme-violet.txt-bg1,
.theme-violet .txt-bg1 {
  color: #120231;
}
.theme-violet.txt-bg2,
.theme-violet .txt-bg2 {
  color: #3700a3;
}
.theme-violet.txt-fg1,
.theme-violet .txt-fg1 {
  color: #7b37ff;
}
.theme-violet.txt-fg2,
.theme-violet .txt-fg2 {
  color: #9e6cff;
}
.theme-violet svg .stroke-bg1 {
  stroke: #120231;
}
.theme-violet svg .stroke-bg2 {
  stroke: #3700a3;
}
.theme-violet svg .stroke-fg1 {
  stroke: #7b37ff;
}
.theme-violet svg .stroke-fg2 {
  stroke: #9e6cff;
}
.theme-violet svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-violet svg .fill-bg1 {
  fill: #120231;
}
.theme-violet svg .fill-bg2 {
  fill: #3700a3;
}
.theme-violet svg .fill-fg1 {
  fill: #7b37ff;
}
.theme-violet svg .fill-fg2 {
  fill: #9e6cff;
}
.theme-violet.outline-bg1,
.theme-violet .outline-bg1 {
  outline-color: #120231;
}
.theme-violet.outline-bg2,
.theme-violet .outline-bg2 {
  outline-color: #3700a3;
}
.theme-violet.outline-fg1,
.theme-violet .outline-fg1 {
  outline-color: #7b37ff;
}
.theme-violet.outline-fg2,
.theme-violet .outline-fg2 {
  outline-color: #9e6cff;
}
.theme-pink {
  color: #f0f0f0;
}
.theme-pink.bg-bg1,
.theme-pink .bg-bg1 {
  background-color: #2b1428;
}
.theme-pink.bg-bg2,
.theme-pink .bg-bg2 {
  background-color: #67255e;
}
.theme-pink.bg-fg1,
.theme-pink .bg-fg1 {
  background-color: #d518bd;
}
.theme-pink.bg-fg2,
.theme-pink .bg-fg2 {
  background-color: #ff6aec;
}
.theme-pink.bd-bg1,
.theme-pink .bd-bg1 {
  border-color: #2b1428;
}
.theme-pink.bd-bg2,
.theme-pink .bd-bg2 {
  border-color: #67255e;
}
.theme-pink.bd-fg1,
.theme-pink .bd-fg1 {
  border-color: #d518bd;
}
.theme-pink.bd-fg2,
.theme-pink .bd-fg2 {
  border-color: #ff6aec;
}
.theme-pink.txt-bg1,
.theme-pink .txt-bg1 {
  color: #2b1428;
}
.theme-pink.txt-bg2,
.theme-pink .txt-bg2 {
  color: #67255e;
}
.theme-pink.txt-fg1,
.theme-pink .txt-fg1 {
  color: #d518bd;
}
.theme-pink.txt-fg2,
.theme-pink .txt-fg2 {
  color: #ff6aec;
}
.theme-pink svg .stroke-bg1 {
  stroke: #2b1428;
}
.theme-pink svg .stroke-bg2 {
  stroke: #67255e;
}
.theme-pink svg .stroke-fg1 {
  stroke: #d518bd;
}
.theme-pink svg .stroke-fg2 {
  stroke: #ff6aec;
}
.theme-pink svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-pink svg .fill-bg1 {
  fill: #2b1428;
}
.theme-pink svg .fill-bg2 {
  fill: #67255e;
}
.theme-pink svg .fill-fg1 {
  fill: #d518bd;
}
.theme-pink svg .fill-fg2 {
  fill: #ff6aec;
}
.theme-pink.outline-bg1,
.theme-pink .outline-bg1 {
  outline-color: #2b1428;
}
.theme-pink.outline-bg2,
.theme-pink .outline-bg2 {
  outline-color: #67255e;
}
.theme-pink.outline-fg1,
.theme-pink .outline-fg1 {
  outline-color: #d518bd;
}
.theme-pink.outline-fg2,
.theme-pink .outline-fg2 {
  outline-color: #ff6aec;
}
.theme-yellow {
  color: #f0f0f0;
}
.theme-yellow.bg-bg1,
.theme-yellow .bg-bg1 {
  background-color: #21200e;
}
.theme-yellow.bg-bg2,
.theme-yellow .bg-bg2 {
  background-color: #484400;
}
.theme-yellow.bg-fg1,
.theme-yellow .bg-fg1 {
  background-color: #a9a117;
}
.theme-yellow.bg-fg2,
.theme-yellow .bg-fg2 {
  background-color: #fff766;
}
.theme-yellow.bd-bg1,
.theme-yellow .bd-bg1 {
  border-color: #21200e;
}
.theme-yellow.bd-bg2,
.theme-yellow .bd-bg2 {
  border-color: #484400;
}
.theme-yellow.bd-fg1,
.theme-yellow .bd-fg1 {
  border-color: #a9a117;
}
.theme-yellow.bd-fg2,
.theme-yellow .bd-fg2 {
  border-color: #fff766;
}
.theme-yellow.txt-bg1,
.theme-yellow .txt-bg1 {
  color: #21200e;
}
.theme-yellow.txt-bg2,
.theme-yellow .txt-bg2 {
  color: #484400;
}
.theme-yellow.txt-fg1,
.theme-yellow .txt-fg1 {
  color: #a9a117;
}
.theme-yellow.txt-fg2,
.theme-yellow .txt-fg2 {
  color: #fff766;
}
.theme-yellow svg .stroke-bg1 {
  stroke: #21200e;
}
.theme-yellow svg .stroke-bg2 {
  stroke: #484400;
}
.theme-yellow svg .stroke-fg1 {
  stroke: #a9a117;
}
.theme-yellow svg .stroke-fg2 {
  stroke: #fff766;
}
.theme-yellow svg .stroke-txt {
  stroke: #f0f0f0;
}
.theme-yellow svg .fill-bg1 {
  fill: #21200e;
}
.theme-yellow svg .fill-bg2 {
  fill: #484400;
}
.theme-yellow svg .fill-fg1 {
  fill: #a9a117;
}
.theme-yellow svg .fill-fg2 {
  fill: #fff766;
}
.theme-yellow.outline-bg1,
.theme-yellow .outline-bg1 {
  outline-color: #21200e;
}
.theme-yellow.outline-bg2,
.theme-yellow .outline-bg2 {
  outline-color: #484400;
}
.theme-yellow.outline-fg1,
.theme-yellow .outline-fg1 {
  outline-color: #a9a117;
}
.theme-yellow.outline-fg2,
.theme-yellow .outline-fg2 {
  outline-color: #fff766;
}
.cell-1-1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.cell-1-2 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.cell-1-3 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.cell-1-4 {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
}
.cell-1-5 {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.cell-1-6 {
  -ms-grid-row: 1;
  -ms-grid-column: 6;
}
.cell-1-7 {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
.cell-1-8 {
  -ms-grid-row: 1;
  -ms-grid-column: 8;
}
.cell-2-1 {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}
.cell-2-2 {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}
.cell-2-3 {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}
.cell-2-4 {
  -ms-grid-row: 2;
  -ms-grid-column: 4;
}
.cell-2-5 {
  -ms-grid-row: 2;
  -ms-grid-column: 5;
}
.cell-2-6 {
  -ms-grid-row: 2;
  -ms-grid-column: 6;
}
.cell-2-7 {
  -ms-grid-row: 2;
  -ms-grid-column: 7;
}
.cell-2-8 {
  -ms-grid-row: 2;
  -ms-grid-column: 8;
}
.cell-3-1 {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.cell-3-2 {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}
.cell-3-3 {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.cell-3-4 {
  -ms-grid-row: 3;
  -ms-grid-column: 4;
}
.cell-3-5 {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
.cell-3-6 {
  -ms-grid-row: 3;
  -ms-grid-column: 6;
}
.cell-3-7 {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}
.cell-3-8 {
  -ms-grid-row: 3;
  -ms-grid-column: 8;
}
.cell-4-1 {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
}
.cell-4-2 {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
}
.cell-4-3 {
  -ms-grid-row: 4;
  -ms-grid-column: 3;
}
.cell-4-4 {
  -ms-grid-row: 4;
  -ms-grid-column: 4;
}
.cell-4-5 {
  -ms-grid-row: 4;
  -ms-grid-column: 5;
}
.cell-4-6 {
  -ms-grid-row: 4;
  -ms-grid-column: 6;
}
.cell-4-7 {
  -ms-grid-row: 4;
  -ms-grid-column: 7;
}
.cell-4-8 {
  -ms-grid-row: 4;
  -ms-grid-column: 8;
}
.cell-5-1 {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
.cell-5-2 {
  -ms-grid-row: 5;
  -ms-grid-column: 2;
}
.cell-5-3 {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
.cell-5-4 {
  -ms-grid-row: 5;
  -ms-grid-column: 4;
}
.cell-5-5 {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}
.cell-5-6 {
  -ms-grid-row: 5;
  -ms-grid-column: 6;
}
.cell-5-7 {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}
.cell-5-8 {
  -ms-grid-row: 5;
  -ms-grid-column: 8;
}
.cell-6-1 {
  -ms-grid-row: 6;
  -ms-grid-column: 1;
}
.cell-6-2 {
  -ms-grid-row: 6;
  -ms-grid-column: 2;
}
.cell-6-3 {
  -ms-grid-row: 6;
  -ms-grid-column: 3;
}
.cell-6-4 {
  -ms-grid-row: 6;
  -ms-grid-column: 4;
}
.cell-6-5 {
  -ms-grid-row: 6;
  -ms-grid-column: 5;
}
.cell-6-6 {
  -ms-grid-row: 6;
  -ms-grid-column: 6;
}
.cell-6-7 {
  -ms-grid-row: 6;
  -ms-grid-column: 7;
}
.cell-6-8 {
  -ms-grid-row: 6;
  -ms-grid-column: 8;
}
#editor-header {
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 1fr 1fr;
}
@media (min-width: 768px) {
  #editor-header {
    -ms-grid-columns: 240px 1fr;
    -ms-grid-rows: 1fr;
  }
}
@media (min-width: 768px) {
  #editor-header {
    -ms-grid-columns: 280px 1fr;
    -ms-grid-rows: 1fr;
  }
}
#editor-header > * {
  height: 90px;
}
#editor-header .time-display time {
  display: block;
  text-align: center;
  font-family: 'Lucida Console';
}
#editor-header .time-display .time-playback {
  color: #32b446;
  font-size: 20px;
}
#editor-header .playback-tools {
  -ms-grid-row: 2;
  display: -ms-grid;
  -ms-grid-columns: 60px 60px 60px;
}
@media (min-width: 768px) {
  #editor-header .playback-tools {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
  }
}
#editor-header .playback-tools button {
  display: block;
  min-width: 57.5px;
  height: 57.5px;
  font-size: 20px;
  -ms-grid-column-align: center;
  -ms-grid-row-align: start;
}
.zoom-overlay {
  -ms-touch-action: none;
  z-index: 2;
  width: 100vw;
  height: 100vw;
  position: fixed;
  background: rgba(255, 128, 128, 0.1);
}
#editor-canvas {
  height: calc(100% -  90px );
  display: -ms-grid;
  -ms-grid-columns: 160px 1fr;
  -ms-grid-rows: 1fr;
  overflow: hidden;
}
@media (min-width: 768px) {
  #editor-canvas {
    -ms-grid-columns: 240px 1fr;
  }
}
@media (min-width: 992px) {
  #editor-canvas {
    -ms-grid-columns: 280px 1fr;
  }
}
#editor-canvas .canvas-viewport {
  -ms-grid-column: 2;
}
#editor-canvas .track-canvas {
  -ms-grid-column-span: 2;
  padding-left: 160px;
}
@media (min-width: 768px) {
  #editor-canvas .track-canvas {
    padding-left: 240px;
  }
}
@media (min-width: 992px) {
  #editor-canvas .track-canvas {
    padding-left: 280px;
  }
}
#editor-canvas .track-canvas .tracks-wrapper {
  position: relative;
  display: table;
  min-height: 100%;
}
#editor-canvas .custom-manip-scrollbar-grid {
  overflow: visible;
}
.track-settings {
  width: 160px;
  display: -ms-grid;
  -ms-grid-columns: 0px 1fr ;
  -ms-grid-rows: 1fr 20px;
  border: 2px solid transparent;
  border-right: 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
@media (min-width: 768px) {
  .track-settings {
    -ms-grid-columns: 80px 1fr ;
    width: 240px;
  }
}
@media (min-width: 992px) {
  .track-settings {
    -ms-grid-columns: 120px 1fr ;
    width: 280px;
  }
}
.track-settings .actual-track-settings {
  -ms-grid-column: 2;
  display: -ms-grid;
  -ms-grid-rows: 1em 1fr;
  -ms-grid-columns: 1fr 50px 10px 50px;
  margin-right: 2px;
}
.track-settings .actual-track-settings .volume-knob {
  -ms-grid-row: 2;
  -ms-grid-column: 4;
}
.track-settings .actual-track-settings .balance-knob {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}
.track-settings .resize-handle {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
  background: rgba(0, 0, 0, 0.3);
  height: 20px;
  line-height: 20px;
}
.track-settings .resize-handle:hover,
.track-settings .resize-handle .ui-resizable-resizing {
  background: rgba(0, 0, 0, 0.7);
}
.track-settings .track-name {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column-span: 2;
  font-size: 1em;
  text-overflow: ellipsis;
  text-wrap: none;
  padding: 4px 6px;
}
.track-settings .pseudo-resize-handle {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  background: rgba(0, 0, 0, 0.3);
  height: 20px;
}
.knob-control:after {
  content: '';
  padding-top: 100%;
  display: inline-block;
  width: 0;
}
.knob-control .knob-circle {
  width: 0.84em;
  height: 0.84em;
  margin: 0.06em;
  border-style: solid;
  border-width: 0.05em;
  border-radius: 1em;
  background: black;
}
.knob-control .knob-line {
  position: absolute;
  display: block;
  height: 0.04em;
  width: 1em;
  top: 0.4em;
  left: -0.03em;
  transform-origin: center;
}
.knob-control .knob-hand {
  width: 40%;
  height: 100%;
}
.knob-control .knob-dot {
  position: absolute;
  width: 0.1em;
  height: 0.1em;
  border-radius: 0.1em;
  margin-top: -0.06em;
}
.knob-control .knob-dot.left {
  left: 0;
}
.knob-control .knob-dot.right {
  left: 0.9em;
}
.knob-control .scroll-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow-y: scroll;
  -ms-overflow-style: none;
  -ms-scroll-chaining: none;
  -ms-scroll-rails: railed;
  z-index: 10;
}
.knob-control .scroll-overlay:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  margin-top: 300%;
}
ctl-knob {
  display: block;
  font-size: 50px;
}
ctl-knob.lg {
  font-size: 80px;
}
ctl-knob.md {
  font-size: 50px;
}
ctl-knob.sm {
  font-size: 40px;
}
.track-visual {
  min-width: 100vw;
  box-sizing: border-box;
  background: transparent;
  padding-right: calc(100vw - 160px);
}
@media (min-width: 768px) {
  .track-visual {
    padding-right: calc(100vw - 240px);
  }
}
@media (min-width: 992px) {
  .track-visual {
    padding-right: calc(100vw - 280px);
  }
}
.track-visual .clips {
  height: 100%;
}
.track-visual ctl-clip {
  position: absolute;
  display: block;
  height: 100%;
}
.track-visual.focused > .inner-border {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-width: 2px 2px;
  border-style: solid;
}
.track-visual .drag-clip-shadow {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  height: 100%;
}
.track-visual .drag-clip-shadow.forbidden {
  background: rgba(255, 100, 100, 0.2);
}
.track-visual .drag-clip-outline {
  position: absolute;
  border: 1px solid #ffffff;
  height: 100%;
  box-shadow: #fff 0 0 20px inset;
  pointer-events: none;
}
.track-visual .drag-clip-outline.forbidden {
  border-color: red;
  box-shadow: #f77 0 0 20px inset;
}
track-visual {
  display: block;
  width: 100%;
}
.cursor {
  display: block;
  position: absolute;
  height: 100%;
  width: 0;
  top: 0;
  outline: 0.5px solid invert;
}
.cursor.playback {
  outline: 0.5px solid rgba(91, 255, 113, 0.76);
}
.renameTrackDialog-control {
  width: 300px;
}
.renameTrackDialog-control .palette {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 0;
  padding: 0;
  width: 300px;
  margin-bottom: 5px;
  margin-right: 5px;
}
.renameTrackDialog-control .palette > li {
  display: block;
  list-style: none;
  width: 30px;
  height: 30px;
  border-width: 2px;
  border-style: solid;
  box-sizing: border-box;
  margin-left: 5px;
  margin-top: 5px;
}
.editone-clip {
  position: relative;
  display: -ms-grid;
  -ms-grid-rows: 1fr;
  height: 100%;
  transform: scale(1);
  transition-duration: 0.1s;
  transition-property: transform;
}
.editone-clip.held {
  transform: scale(1.1);
}
.editone-clip progress {
  position: absolute;
  height: 0.8em;
}
.editone-clip > .inner-border-separator {
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 1px solid rgba(29, 29, 29, 0.7);
  -ms-grid-column-span: 99999;
  order: 1;
}
.editone-clip.focused > .inner-border {
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-width: 2px;
  border-style: solid;
  -ms-grid-column-span: 99999;
  order: 2;
}
ctl-clip {
  display: block;
  height: 100%;
}
.custom-manip-scrollbar {
  -ms-grid-row-align: stretch;
  -ms-grid-column-align: stretch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  position: relative;
  z-index: 2;
}
.custom-manip-scrollbar-grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 17px;
  -ms-grid-rows: 1fr 17px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.custom-manip-scrollbar.horizontal {
  -ms-grid-row: 2;
  overflow-x: scroll;
}
.custom-manip-scrollbar.vertical {
  -ms-grid-column: 2;
  overflow-y: scroll;
}
.custom-manip-scroll-content {
  -ms-grid-column-span: 2;
  -ms-grid-row-span: 2;
}
.custom-manip-scroll-dummy-content {
  display: block;
  width: 17px;
  height: 17px;
}
.clipTile-control {
  pointer-events: none;
  height: 100%;
}
.clipTile-control .clipTile-stack {
  height: 100%;
  display: -ms-grid;
  -ms-grid-rows: 1fr;
  -ms-grid-columns: 1fr;
  position: relative;
}
.clipTile-control .clipTile-stack * {
  -ms-grid-column-align: stretch;
  -ms-grid-row-align: stretch;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
body {
  overflow: hidden;
}
.sizeref {
  position: relative;
}
.fill {
  width: 100%;
  height: 100%;
}
.splashscreen {
  background-color: #464646;
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 1fr;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.splashscreen .splashscreen-loader {
  -ms-grid-column-align: center;
  -ms-grid-row-align: center;
  display: -ms-inline-grid;
  grid-rows: 1fr;
  grid-columns: auto auto;
  color: white;
}
.splashscreen .splashscreen-loader .splashscreen-image {
  grid-row-align: center;
  grid-column-align: center;
  max-width: 100%;
}
.scrollable {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  width: 100%;
  height: 100%;
}
.scrollable .scrollable-content {
  width: 3000px;
  height: 3000px;
}
.hidden {
  display: none;
}
